import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

import { Block } from '../../../components/detail/index';
import Theme from '../../../native-base-theme/variables/commonColor';

const data = [{
  type: 'block',
  showHeader: true,
  title: '基本信息',
  contents: [{
    label: '设备编码',
    key: 'equipmentCode',
    value: '',
  }, {
    label: '设备名称',
    key: 'equipmentName',
    value: '',
  }, {
    label: '设备类别',
    key: 'equipmentLevel',
    value: '',
  }, {
    label: '归属公司',
    key: 'subCorp',
    value: '',
  }, {
    label: '归属部门',
    key: 'ownerOrgDepartment',
    value: '',
  }, {
    label: '设备类编码',
    key: 'objType',
    value: '',
  }, {
    label: '使用部门',
    key: 'userOrgDepartment',
    value: '',
  }, {
    label: '使用日期',
    key: 'serviceDate',
    value: '',
  },
  {
    label: '图号',
    key: 'dwgCode',
    value: '',
  },
  {
    label: '维护人',
    key: 'equipmentManager',
    value: '',
  },
  {
    label: '检修责任单位',
    key: 'maintOrgName',
    value: '',
  }],
}, {
  type: 'block',
  showHeader: true,
  title: '制造安装信息',
  contents: [{
    label: '制造国',
    key: 'pmc',
    value: '',
  }, {
    label: '制造厂家',
    key: 'manufacturerName',
    value: '',
  }, {
    label: '品牌',
    key: 'brand',
    value: '',
  }, {
    label: '出厂编号',
    key: 'manufactingNo',
    value: '',
  }, {
    label: '出厂日期',
    key: 'productionDate',
    value: '',
  }, {
    label: '区域',
    key: 'areaName',
    value: '',
  }, {
    label: '安装时间',
    key: 'installDate',
    value: '',
  }, {
    label: '安装地点',
    key: 'equipmentDeposit',
    value: '',
  }, {
    label: '经度',
    key: 'latitude',
    value: '',
  }, {
    label: '纬度',
    key: 'longitude',
    value: '',
  }],
}];

class Tab1 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  _getPage = () => {
    const list = [];
    let key = 0;
    data.forEach(item => {
      this._deepTraversal(item);
      list.push(<Block data={item} key={key} />);
      key += 1;
    });
    return list;
  }

  _deepTraversal = (obj) => {
    if (!obj) return;
    if (obj.contents && obj.contents.length) {
      obj.contents.map(item => this._deepTraversal(item));
    } else {
      obj.value = this._getValueByFiled(obj.key, obj.type);
    }
  }

  _getValueByFiled = (filed, type) => {
    const value = this.props.data[filed];
    if (value) {
      if (type === 'image') {
        return [value];
      }
      return value;
    }
    if (type === 'image') {
      return [];
    }
    return '';
  }

  render() {
    return (
      <View style={styles.tabContent}>
        {this._getPage()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  tabContent: {
    backgroundColor: Theme.myPrimary,
    color: '#ffffff',
  },
});

export default Tab1;
